<template>
  <div>
    <a-alert type="info" show-icon :style="{marginBottom:'15px',borderRadius:'6px'}">
      <span slot="message">
        请及时处理店铺内的售后服务申请单，否则可能会导致您的资金损失以及受到平台的罚款。
        <a href="https://school.jinritemai.com/doudian/web/article/101663?from=shop_article" target="_blank">查看详情 ></a>
      </span>
    </a-alert>

    <a-card :bordered="false" style="width: 100%;border-radius: 4px">
      <div style="width: 100%;height: 60px;line-height: 60px;font-size: 15px;font-weight: bold">
        <img src="~@/assets/img/notes.svg" class="logo" alt="logo">
        0&nbsp;<a>未发货退款待处理、</a>&nbsp;&nbsp;
        0&nbsp;<a>已发货仅退款待处理、</a>&nbsp;&nbsp;
        0&nbsp;<a>退货待处理、</a>&nbsp;&nbsp;
        0&nbsp;<a>待商家收货、</a>&nbsp;&nbsp;
        0&nbsp;<a>待买家退货、</a>&nbsp;&nbsp;
        0&nbsp;<a>待上传退款凭证、</a>&nbsp;&nbsp;
        请及时处理。
      </div>
      <a-divider/>
      <div class="search">
        <div class="searchForm">
          <a-form layout="inline" :form="form" @submit="handleSearch">
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-item :label="`商品编号`">
                  <a-input placeholder="请输入商品编号" v-decorator="['productId']" :style="{width:'200px'}"/>
                </a-form-item>
              </a-col>

              <a-col :span="8">
                <a-form-item :label="`商品名称`">
                  <a-input placeholder="请输入商品名称" v-decorator="['productName']" :style="{width:'200px'}"/>
                </a-form-item>
              </a-col>

              <a-col :span="8">
                <a-form-item :label="`商品类型`">
                  <a-select v-decorator="['productType']" placeholder="请选择商品类型" :style="{width:'200px'}">
                    <a-select-option value="00">
                      全部
                    </a-select-option>
                    <a-select-option value="01">
                      普通商品
                    </a-select-option>
                    <a-select-option value="02">
                      代销商品
                    </a-select-option>
                    <a-select-option value="03">
                      虚拟商品
                    </a-select-option>
                    <a-select-option value="04">
                      闪购商品
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>

              <a-col :span="8">
                <a-form-item :label="`商品类目`">
                  <a-input placeholder="请输入商品类目" v-decorator="[`productClass`]" :style="{width:'200px'}"/>
                </a-form-item>
              </a-col>

              <a-col :span="8">
                <a-form-item :label="`是否预售`">
                  <a-select v-decorator="['isPresell']" placeholder="请选择是否预售" :style="{width:'200px'}">
                    <a-select-option value="00">
                      全部
                    </a-select-option>
                    <a-select-option value="01">
                      非预售
                    </a-select-option>
                    <a-select-option value="02">
                      预售
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>

              <a-col :span="8">
                <a-form-item :label="`创建时间`">
                  <a-range-picker v-decorator="['createTime']" :style="{width:'200px'}"/>
                </a-form-item>
              </a-col>

              <a-col :span="8">
                <a-form-item :label="`支付方式`">
                  <a-select v-decorator="['payType']" placeholder="请选择支付方式" :style="{width:'200px'}">
                    <a-select-option value="00">
                      全部
                    </a-select-option>
                    <a-select-option value="01">
                      货到付款
                    </a-select-option>
                    <a-select-option value="02">
                      在线支付
                    </a-select-option>
                    <a-select-option value="03">
                      货到付款&在线支付
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>

              <a-col :span="8">
                <a-form-item :label="`频道展示`">
                  <a-select v-decorator="['isChannelShow']" placeholder="请选择频道展示" :style="{width:'200px'}">
                    <a-select-option value="00">
                      全部
                    </a-select-option>
                    <a-select-option value="01">
                      是
                    </a-select-option>
                    <a-select-option value="02">
                      否
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <div class="searchBtn">
          <a-button :style="{marginTop:'20px'}" type="primary" html-type="submit">
            查询
          </a-button>
          <br/>
          <a-button :style="{marginTop:'20px'}" @click="handleReset">
            重置
          </a-button>
        </div>
      </div>

      <a-tabs :style="{width:'100%'}">
        <span slot="tabBarExtraContent">
          <a-icon type="download" />
          导出明细
        </span>

        <a-tab-pane key="1" tab="全部">
          <div class="tableTool">
            <a-row>
              <a-col span="6" :style="{height:'32px',lineHeight:'32px'}">
                临近处理超时 <a-icon type="caret-up" />
              </a-col>
              <a-col span="18" :style="{textAlign:'right'}">
                <a-button :style="{ marginLeft: '8px' }">
                  批量同意退款
                </a-button>
                <a-button :style="{ marginLeft: '8px' }">
                  批量同意退货
                </a-button>
              </a-col>
            </a-row>
          </div>
          <a-table :columns="columns" :data-source="data" :style="{marginTop:'15px',float:'left',width:'100%'}">
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="2" tab="未发货退款待处理">
          <div class="tableTool">
            <a-row>
              <a-col span="6" :style="{height:'32px',lineHeight:'32px'}">
                临近处理超时 <a-icon type="caret-up" />
              </a-col>
              <a-col span="18" :style="{textAlign:'right'}">
                <a-button :style="{ marginLeft: '8px' }">
                  批量同意退款
                </a-button>
              </a-col>
            </a-row>
          </div>
          <a-table :columns="columns" :data-source="data" :style="{marginTop:'15px',float:'left',width:'100%'}">
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="3" tab="已发货仅退款待处理">
          <div class="tableTool">
            <a-row>
              <a-col span="6" :style="{height:'32px',lineHeight:'32px'}">
                临近处理超时 <a-icon type="caret-up" />
              </a-col>
              <a-col span="18" :style="{textAlign:'right'}">
                <a-button :style="{ marginLeft: '8px' }">
                  批量同意退款
                </a-button>
              </a-col>
            </a-row>
          </div>
          <a-table :columns="columns" :data-source="data" :style="{marginTop:'15px',float:'left',width:'100%'}">
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="4" tab="退货待处理">
          <div class="tableTool">
            <a-row>
              <a-col span="6" :style="{height:'32px',lineHeight:'32px'}">
                临近处理超时 <a-icon type="caret-up" />
              </a-col>
              <a-col span="18" :style="{textAlign:'right'}">
                <a-button :style="{ marginLeft: '8px' }">
                  批量同意退货
                </a-button>
              </a-col>
            </a-row>
          </div>
          <a-table :columns="columns" :data-source="data" :style="{marginTop:'15px',float:'left',width:'100%'}">
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="5" tab="待商家收货">
          <div class="tableTool">
            <a-row>
              <a-col span="6" :style="{height:'32px',lineHeight:'32px'}">
                临近处理超时 <a-icon type="caret-up" />
              </a-col>
            </a-row>
          </div>
          <a-table :columns="columns" :data-source="data" :style="{marginTop:'15px',float:'left',width:'100%'}">
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="6" tab="仲裁中">
          <a-table :columns="columns" :data-source="data" :style="{float:'left',width:'100%'}">
          </a-table>
        </a-tab-pane>
      </a-tabs>

    </a-card>
  </div>
</template>

<script>
  const columns = [
    {
      title: '商品信息',
      dataIndex: 'productDesc',
      key: 'productDesc'
    },
    {
      title: '售价(元)',
      dataIndex: 'productPrice',
      key: 'productPrice'
    },
    {
      title: '总库存',
      dataIndex: 'productStock',
      key: 'productStock'
    },
    {
      title: '销量',
      key: 'productSales',
      dataIndex: 'productSales'
    },
    {
      title: '创建时间',
      key: 'createTime',
      dataIndex: 'createTime'
    },
    {
      title: '操作',
      key: 'action',
      scopedSlots: { customRender: 'action' }
    }
  ]

  const data = []

  export default {
    name: 'AfterSaleWorkbench',
    data () {
      return {
        form: this.$form.createForm(this, { name: 'product_online_search' }),
        columns: columns,
        data: data
      }
    },
    methods: {
      handleSearch (e) {
        e.preventDefault()
        this.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values)
          }
        })
      },
      handleReset () {
        this.form.resetFields()
      }
    }
  }
</script>

<style scoped>
  .search {
    margin-top: 16px;
    width: 100%;
  }

  .searchForm {
    float: left;
    width: 92%;
  }

  .searchBtn {
    border-left: 1px solid #edeff2;
    float: right;
    width: 8%;
    height: 120px;
    padding-left: 20px;
  }

  /*.tableTool {*/
  /*  float: right;*/
  /*  padding-top: 15px;*/
  /*}*/
</style>
